<script setup>
  import { ref } from 'vue'
  import { http } from '@/utils/http.js'
  import { onLoad, onShow } from '@dcloudio/uni-app'
  import { useUsercodeStore } from '@/store/usercode.js'
  import { parseTime } from '@/utils/index.js'

  // 创建 Store 实例

  const dealId = ref(0)
  const joininData = ref()
  const daysShort = ref()
  const isJoin = ref(false)
  const joinId = ref(0)
  async function joinDetail() {
    const userCodeStore = useUsercodeStore()
    const res = await http.request({
      url: '/api//bidding/biddingDetails',
      method: 'POST',
      data: {
        id: dealId.value,
      },
    })
    joininData.value = res.data
    const currentTimestamp = Math.floor(Date.now() / 1000)
    daysShort.value = joininData.value.pass_time - currentTimestamp
    joininData.value.participate.forEach((item) => {
      if (item.user_id == userCodeStore.usercode.user) {
        isJoin.value = true
        joinId.value = item.id
      }
    })

    joininData.value.goods.forEach((item) => {
      const currentTimestamp = Math.floor(Date.now() / 1000)
      let daysShort = item.pass_time - currentTimestamp
      item.passDay = Math.floor(daysShort / (24 * 60 * 60))
    })
  }

  // 撤回出价
  async function cancelJoin() {
    const res = await http.request({
      url: '/api/bidding/backOffer',
      method: 'POST',
      data: {
        id: joinId.value,
      },
    })
    if (res.st == 1) {
      uni.utils.toast('撤销成功')
      isJoin.value = false
      joinDetail()
    } else {
      uni.utils.toast('撤销失败')
    }
  }
  // 参与/查看出价
  function payPage() {
    uni.navigateTo({
      url: `/transactionPage/joinpay/index?id=${dealId.value}`,
    })
  }

  //商品详情弹出
  const goodspopup = ref()
  const goodsInfo = ref({
    goods_name: '',
    img: '',
  })
  function checkgoods(item) {
    console.log(item)
    goodsInfo.value = item
    goodspopup.value.open('bottom')
  }

  onLoad((option) => {
    dealId.value = option.id
  })
  onShow(() => {
    joinDetail()
  })
</script>

<template>
  <view class="join-content">
    <view class="joinin-content-item">
      <view class="joinin-content-item-top">
        <view class="joinin-content-item-top-left">
          <view
            class=""
            style="
              position: relative;
              width: 88rpx;
              height: 88rpx;
              margin-right: 22rpx;
            "
          >
            <image
              :src="joininData.himg"
              style="width: 88rpx; height: 88rpx; border-radius: 50%"
              mode=""
            ></image>
          </view>
          <view class="" style="font-size: 30rpx; font-weight: 700">
            {{ joininData.nickname }}
          </view>
        </view>
        <view class="top-time">
          <image
            src="../../static/hourglass.png"
            mode=""
            style="width: 60rpx; height: 60rpx; margin-right: 8rpx"
          ></image>
          <view class="" style="font-size: 26rpx">
            <uni-countdown
              :show-day="false"
              :hour="Math.floor((daysShort % (60 * 60 * 24)) / (60 * 60))"
              :minute="Math.floor((daysShort % (60 * 60)) / 60)"
              :second="Math.floor(daysShort % 60)"
            />
            <!-- {{
							`${Math.floor(
								(daysShort % (60 * 60 * 24)) / (60 * 60)
							)}:${Math.floor((daysShort % (60 * 60)) / 60)}`
						}} -->
          </view>
        </view>
      </view>
      <view class="joinin-content-item-center">
        <scroll-view
          class="scroll-view_H"
          scroll-x="true"
          style="height: 120rpx; width: 100%"
        >
          <view class="scroll-view_H-list">
            <view
              class="scroll-view_H-item"
              style="position: relative"
              v-for="(goods, index) in joininData.goods"
              :key="'goods' + index"
              @click="checkgoods(goods)"
            >
              <image
                :src="goods.img"
                style="width: 130rpx; height: 130rpx; display: block"
                mode=""
              ></image>
              <view class="presare" v-if="goods.type == 1"> 预售 </view>
              <!-- <view v-else class="passTime">
                <image
                  src="@/static/pass.png"
                  style="width: 16rpx; height: 16rpx"
                  mode=""
                ></image>
                <view class="" style="font-size: 12rpx; color: #fff">
                  {{ goods.passDay }}天后自动发货
                </view>
              </view> -->
            </view>
          </view>
        </scroll-view>
        <view class="total-goods"> 共{{ joininData.goods.length }}件 </view>
      </view>
      <view class="joinin-content-item-bottom">
        <view class="joinin-content-item-bottom-left">
          <!-- <view class="joinin-content-item-bottom-left-item">
						<image
							src="../../static/start-price.png"
							style="
								width: 42rpx;
								height: 42rpx;
								margin-right: 10rpx;
							"
							mode=""
						></image>
						<view
							class=""
							style="font-size: 20rpx; font-weight: 700"
						>
							{{ joininData.min_price }}
						</view>
					</view> -->
          <view
            class="joinin-content-item-bottom-left-item"
            v-if="joininData.is_buy == 1"
          >
            <image
              src="../../static/one-price.png"
              style="width: 42rpx; height: 42rpx; margin-right: 10rpx"
              mode=""
            ></image>
            <view class="" style="font-size: 20rpx; font-weight: 700">
              {{ joininData.buy_price }}
            </view>
          </view>
          <view class="joinin-content-item-bottom-left-item">
            <image
              src="../../static/join-num.png"
              style="width: 42rpx; height: 42rpx; margin-right: 10rpx"
              mode=""
            ></image>
            <view class="" style="font-size: 20rpx; font-weight: 700">
              {{ joininData.participate_num }}
            </view>
          </view>
        </view>
        <view class="joinin-content-item-bottom-right">
          <view class="price-button button" v-if="isJoin" @click="cancelJoin">
            撤回出价
          </view>
          <view class="join-button back" v-else @click="payPage">
            参与交易
          </view>
        </view>
      </view>
    </view>
    <view class="joinin-list">
      <view
        class="joinin-list-item"
        v-for="item in joininData.participate"
        :key="'user' + item.id"
      >
        <view class="joinin-list-item-left">
          <image
            :src="item.himg"
            style="
              width: 88rpx;
              height: 88rpx;
              margin-right: 18rpx;
              border-radius: 44rpx;
            "
            mode=""
          ></image>
          <view class="join-user">
            <view class="join-user-name">
              <view class="name">
                {{ `${item.nickname[0]}****` }}
              </view>
              <view class="back ismine" v-if="item.money > 0"> 我的出价 </view>
            </view>
            <view class="join-time">{{ parseTime(item.update_time) }}</view>
          </view>
        </view>
        <view class="joinin-list-item-right">
          <view class="mine-price" v-if="item.money > 0">
            <view class="" style="font-size: 24rpx; font-weight: 700">
              {{ item.money }}
            </view>
          </view>
          <view class="user-button" v-else> 出价**** </view>
        </view>
      </view>
    </view>

    <!-- 详情弹出层 -->
    <uni-popup ref="goodspopup" type="bottom">
      <view class="goodspopup-content">
        <view class="goods-title">{{ goodsInfo.goods_name }} </view>
        <image
          :src="goodsInfo.img"
          style="width: 660rpx; height: 660rpx"
          mode=""
        ></image>
      </view>
    </uni-popup>
  </view>
</template>

<style lang="scss" scoped>
  .join-content {
    height: 100vh;
    padding: 20rpx;
    box-sizing: border-box;
    background-color: #f5f5f5;
    .joinin-content-item {
      height: 398rpx;
      margin-bottom: 20rpx;
      padding: 22rpx 18rpx 0 18rpx;
      box-sizing: border-box;
      border-radius: 12rpx;
      background-color: #fff;
      .joinin-content-item-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .joinin-content-item-top-left {
          display: flex;
          align-items: center;
        }
        .top-time {
          display: flex;
          align-items: center;
        }
      }
      .joinin-content-item-center {
        position: relative;
        height: 182rpx;
        padding: 32rpx 0;
        box-sizing: border-box;
        border-bottom: 6rpx solid #f5f5f5;
        .total-goods {
          position: absolute;
          right: 0;
          top: 50%;
          transform: translateY(-50%);
          width: 92rpx;
          height: 46rpx;
          background-color: #eeeeee;
          font-size: 26rpx;
          line-height: 46rpx;
          text-align: center;
          color: #9b9b9d;
        }
        .scroll-view_H {
          .scroll-view_H-list {
            display: flex;
            flex-wrap: nowrap;
            .scroll-view_H-item {
              width: 130rpx;
              height: 130rpx;
              margin-right: 20rpx;
              box-sizing: border-box;
              &:last-child {
                margin-right: 0;
              }
              .presare {
                position: absolute;
                top: 0;
                right: 0;
                width: 54rpx;
                height: 28rpx;
                border-radius: 0 10rpx 0 0;
                background-color: rgba(0, 0, 0, 0.5);
                font-size: 20rpx;
                line-height: 28rpx;
                text-align: center;
                color: #fff;
              }
              .passTime {
                position: absolute;
                top: 0;
                left: 0;
                display: flex;
                align-items: center;
                justify-content: center;
                width: 100%;
                height: 28rpx;
                border-radius: 10rpx 10rpx 0 0;
                background-color: rgba(0, 0, 0, 0.5);
              }
            }
          }
        }
      }
      .joinin-content-item-bottom {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 92rpx;
        .joinin-content-item-bottom-left {
          display: flex;
          align-items: center;
          .joinin-content-item-bottom-left-item {
            width: 134rpx;
            display: flex;
            align-items: center;
          }
        }
        .joinin-content-item-bottom-right {
          .button {
            width: 158rpx;
            height: 58rpx;
            border-radius: 29rpx;
            background-color: #ff5163;
            text-align: center;
            line-height: 58rpx;
            font-size: 24rpx;
            font-weight: 700;
            color: #fff;
          }
          .join-button {
            width: 158rpx;
            height: 58rpx;
            border-radius: 29rpx;
            text-align: center;
            line-height: 58rpx;
            font-size: 24rpx;
            font-weight: 700;
          }
        }
      }
    }
    .joinin-list {
      border-radius: 12rpx;
      background-color: #fff;
      .joinin-list-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 170rpx;
        padding: 0 22rpx;
        box-sizing: border-box;
        border-bottom: 4rpx dashed #f5f5f5;
        &:last-child {
          border: none;
        }
        .joinin-list-item-left {
          display: flex;
          align-items: center;
          .join-user {
            display: flex;
            flex-direction: column;
            .join-user-name {
              display: flex;
              align-items: center;
              margin-bottom: 10rpx;
              .name {
                margin-right: 10rpx;
                font-size: 26rpx;
                font-weight: 700;
              }
              .ismine {
                width: 118rpx;
                height: 36rpx;
                border-radius: 8rpx;
                text-align: center;
                line-height: 36rpx;
                font-size: 20rpx;
                font-weight: 700;
              }
            }
            .join-time {
              font-size: 22rpx;
              color: #9b9b9d;
            }
          }
        }
        .joinin-list-item-right {
          .mine-price {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 158rpx;
          }
          .user-button {
            width: 158rpx;
            height: 58rpx;
            border-radius: 29rpx;
            background-color: #f7f7f7;
            font-size: 24rpx;
            font-weight: 700;
            line-height: 58rpx;
            text-align: center;
          }
        }
      }
    }
    .back {
      background-color: $transaction-color;
    }
    .goodspopup-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      height: 886rpx;
      width: 710rpx;
      margin: 0 auto;
      padding-top: 36rpx;
      box-sizing: border-box;
      border-radius: 10rpx 10rpx 0 0;
      background-color: #fff;
      .goods-title {
        margin-bottom: 17rpx;
        font-size: 30rpx;
      }
    }
  }
</style>
